<template>
	<view class="custom-scroll-view">
		<block>
			<scroll-view :style="{height:scrollHeightValue}" scroll-y :show-scrollbar="false" :scroll-top="scrollTop"
				@scroll="handleScroll" @scrolltolower="handleScrolltolower" refresher-enabled
				@refresherrefresh="handleRefresherLoad" :refresher-triggered="refresher_triggered"
				:refresher-threshold="120" :refresher-background="refresherBackground">
				<view>
					<!-- 内容插槽，父组件使用本组件时，传入要显示的内容到此处 -->
					<slot :data="data"></slot>
				</view>
				<!-- 内容底部的状态栏，分别显示请求的状态、数据的状态 -->
				<view class="status-container">
					<text class="text" v-if="data.reqStatus=='loading'">加载中</text>
					<view v-else-if="data.reqStatus=='done'">
						<view class="data-empty" v-if="data.dataStatus=='empty'">
							{{emptyText}}
						</view>
						<text class="text" v-else-if="data.dataStatus=='no-more'">已全部加载完成</text>
						<text class="text" v-else-if="data.dataStatus=='load-more'">上滑加载更多</text>
					</view>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			refresherLoad: false,
			scrollHeight: "100%",
			loadData: () => {}, // 加载数据的方法
			emptyText: "", // 暂无数据文案
			refresherBackground: "#e8ebed",
			initImmediatelyLoad: false
		},
		data() {
			return {
				init: true,
				scrollTop: 0,
				oldScrollTop: 0,
				refresher_triggered: false, // 自定义下拉刷新状态
				data: {
					data: [], // 数据列表
					page: 1, // 当前请求的页数
					pages: 0, // 总页数
					status: '', // 状态
				}
			};
		},
		mounted() {
			this.load();
		},
		methods: {
			async load() {
				//调用传入的加载数据的方法（loadData）
				let {
					success,
					data,
					pages
				} = await this.loadData.call(this.$parent, this.data.page + 1);
				this.data.data = data;
				if (success) {
					this.data.pages = pages;
					this.data.page++;
				}
				this.data.reqStatus = 'done';
			},
			//省略其余代码...
		}
	}
</script>

<style>

</style>